<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row>
          <el-form
            :inline="true"
            class="demo-form-inline"
          >
            <el-col :span="18">
              <el-form-item label="学科名称">
                <el-input v-model="subjectName"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="clearable">清除</el-button>
                <el-button
                  type="primary"
                  @click="search"
                >搜索</el-button>
              </el-form-item>
            </el-col>
            <el-col
              :span="6"
              style="text-align: right"
            >
              <el-button
                class="edit"
                icon="el-icon-edit"
                type="success"
                @click="AddSubject"
              >新增学科</el-button>
            </el-col>
          </el-form>
        </el-row>
        <!-- 提示消息 -->
        <el-alert
          :closable="false"
          type="info"
          show-icon
        > 数据一共{{ counts }}条 </el-alert>
        <!-- 表格 -->
        <template>
          <el-table
            style="width: 100%"
            :data="list"
          >
            <el-table-column
              prop="date"
              label="序号"
              type="index"
              :index="indexMethod"
            >
            </el-table-column>
            <el-table-column
              prop="subjectName"
              label="学科名称"
            > </el-table-column>
            <el-table-column
              prop="username"
              label="创建者"
            > </el-table-column>
            <el-table-column
              prop="addDate"
              label="创建日期"
              :formatter="formatterFn"
              width="200"
            >
            </el-table-column>
            <el-table-column
              prop="isFrontDisplay"
              label="前台是否显示"
              #default="scope"
            >
              {{ scope.row.isFrontDisplay === 1 ? '是' : '否' }}
            </el-table-column>
            <el-table-column
              prop="twoLevelDirectory"
              label="二级目录"
            > </el-table-column>
            <el-table-column
              prop="tags"
              label="标签"
            > </el-table-column>
            <el-table-column
              prop="totals"
              label="题目数量"
            > </el-table-column>
            <el-table-column
              prop="address"
              label="操作"
              width="210"
            >
              <template #default="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="classification(scope.row)"
                >学科分类</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="SubjectLabel(scope.row)"
                >学科标签</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="modifySubject(scope.row)"
                >修改</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="delSubject(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 分页 -->
        <div>
          <el-pagination
            background
            :current-page="page"
            :page-size="pagesize"
            :total="counts"
            :page-sizes="[10, 20, 30, 40]"
            layout="->, prev, pager, next,sizes,jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
      <!-- 新增弹框 -->
      <subjectsAdd
        :showDialog.sync="showDialog"
        :modify="modify"
      />
    </div>
  </div>
</template>

<script>
import { list, remove, detail } from '@/api/hmmm/subjects.js'
import dayjs from 'dayjs'
import subjectsAdd from '@/module-hmmm/components/subjects-add'
export default {
  data () {
    return {
      list: [],
      page: 1,
      pagesize: 10,
      counts: 0,
      showDialog: false,
      modify: {},
      edits: {},
      subjectName: '',
      form: {
        page: 1,
        pagesize: 10,
        subjectName: '', // 学科名称
        creator: '', // 创建者
        addDate: '', // 创建日期
        isFrontDisplay: '', // 前台是否显示
        twoLevelDirectory: '', // 二级目录
        tags: '', // 标签
        totals: '' // 题目数量
      }
    }
  },
  created () {
    this.subjectList()
  },
  components: {
    subjectsAdd
  },
  methods: {
    // 点击跳转学科标签
    async SubjectLabel (row) {
      this.edits.id = row
      this.edits.subjectName = this.form.subjectName
      await detail(this.form)
      this.$router.push({
        path: '/subjects/tags',
        query: { id: row.id, name: row.subjectName }
      })

      this.subjectList()
    },
    // 点击跳转学科分类
    async classification (row) {
      this.edits.id = row
      this.edits.subjectName = this.form.subjectName
      await detail(this.form)
      this.$router.push({
        path: '/subjects/directorys',
        query: { id: row.id, name: row.subjectName }
      })

      this.subjectList()
    },
    // 修改学科
    async modifySubject (row) {
      this.showDialog = true
      const { data } = await detail(row)
      // console.log(data)
      this.modify = data
      this.isFrontDisplay = data.isFrontDisplay
    },
    // 新增
    AddSubject () {
      this.showDialog = true
    },
    // 删除
    delSubject (row) {
      // console.log(scope)
      this.$confirm('确定删除吗？')
        .then(async () => {
          if (this.list.length === 1 && this.page > 1) {
            this.page--
          }
          await remove(row)
          // console.log(res)
          // 提示
          this.$message.success('删除成功')
          // 渲染页面
          this.subjectList()
        })
        .catch(() => {})
    },
    // 修改日期格式
    formatterFn (row, column, cellValue, index) {
      return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    // 点击清除，清空
    clearable () {
      this.subjectName = ''
      this.subjectList()
    },
    // 页码递增
    indexMethod (index) {
      return (this.page - 1) * this.pagesize + index + 1
    },
    // 渲染页面
    async subjectList (subjectNamei) {
      const {
        data: { counts, items }
      } = await list({
        subjectName: subjectNamei,
        page: this.page,
        pagesize: this.pagesize
      })
      this.list = items
      this.counts = counts
      // console.log(items)
    },
    // 页容量改变
    handleSizeChange (val) {
      this.pagesize = val
      this.subjectList()
    },
    //  页码改变
    handleCurrentChange (val) {
      this.page = val
      this.subjectList()
    },
    // 点击搜索
    async search () {
      this.subjectList(this.subjectName)
      // this.$message.success('111')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-alert {
  height: 35px;
  margin-bottom: 10px;
  border-radius: 5px;
  font-size: 30px;
  line-height: 18px;
}
::v-deep .el-alert .el-alert__description {
  font-size: 14px;
  line-height: 35px;
}

::v-deep .el-alert__icon.is-big {
  font-size: 16px;
}
.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
